<template>
  <!--  写模板的地方-->
  <div class="demo">
    <h2>学校名称:{{ name }}</h2>
    <h2 class="cty">学校地址:{{ address }}</h2>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
//写数据、方法。。。。的地方

//默认暴露 用时只需要 import 名字 from 文件 就行了
export default {
  //给这个模块配置名字
  name: 'vue-school',
  data() {
    return {
      name: '尚硅谷',
      address: '北京昌平'
    }
  },
  //获取数据 要在挂载好的时候 订阅消息
  mounted() {
    //每次订阅消息 都要获得一个订阅消息的id 直接返回 最好用箭头函数 如果不用 this时undefined 回调中的第一个参数 时消息名 第二个时数据
    this.subId = pubsub.subscribe('receiveData',(MsgName,name) => {
      console.log(MsgName + '已经发布 收到数据:' + name);
    });
  },
  //在组件销毁前 取消订阅消息
  beforeDestroy() {
    //传入的不是消息的名字 而是消息的id
    pubsub.unsubscribe(this.subId);
  }
}
</script>


<style scoped lang="css">
/* scoped 可以让样式在自己的作用域中 可以解决class类名的冲突 */
/* lang可以写样的语法样式 比如css(默认) less sass*/
/*写样式的地方*/
.demo {
  background-color: orange;
}

.cty {
  font-size: 40px;
}

</style>